<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul li {
            list-style: none;
            float: left;
        }
        ul{
            margin-left:1.7% ;
        }
    </style>
</head>
<body>

</body>
<script src="js/jquery-2.0.0.min.js"></script>
<script>
    $(function () {
        const colnum = 3;
        let arr = [];
        let heightArr = [];
        creat();

        function creat() {
            $("<ul></ul>").appendTo($('body')).css("width", "100%");
            for (let i = 0; i < colnum; i++) {
                var li = document.createElement("li");
                $(li).appendTo($("ul"))
                    .css({
                        "width": "32%",
                        // "margin": "0.5% 0.5% 0.5% 0",
                        "margin": "5px 5px 5px 0"
                        // "background":"gray"
                    })
                arr.push(li);
                heightArr.push(0);
            }
            loadImg();
        }

        function loadImg() {
            let img = new Image();
            img.num = 1;
            img.src = `img/${img.num}.jpg`
            $(img).css("width", "100%");
            $(img).on("load", loadHandler);

        }

        function loadHandler() {
            let min = Math.min.apply(null, heightArr)
            let minIndex = heightArr.indexOf(min);
            let img = this.cloneNode(true);
            arr[minIndex].append(img)
            heightArr[minIndex] += img.getBoundingClientRect().height;
            this.num++;
            if (this.num >=11) {
                $(this).off("load",loadHandler)
            }
            this.src = `img/${this.num}.jpg`;
            console.log("load img src:"+this.src)
        }
    });
</script>
</html>